<template>
	<div class="search_page">
		<div class="head border-bottom">
			<i class="iconfont icon-back" @click="goback"></i>
			<input class="Sinput" type="text" placeholder="请输入您要搜索的内容" auto-focus="true" v-focus @keyup.enter="onConfirm" ref="searchInput" :value="q">
			<div class="searchBtn">搜索</div>
		</div>
		<div class="searchList">
			<div class="history">
				<div class="title">
					<div class="chunk"></div>
					<div class="text">历史搜索</div>
				</div>
				<div class="tags">
					<div class="tagsItem" v-for="(item,index) of limit(historyWords,10)" :key="index" @click="onConfirm">{{item}}</div>
				</div>
			</div>
			<div class="hotSearch">
				<div class="title">
					<div class="chunk"></div>
					<div class="text">热门搜索</div>
				</div>
				<div class="tags">
					<div class="tagsItem" v-for="(item,index) of limit(hotWords,10)" :key="index" @click="onConfirm">{{item}}</div>
				</div>
			</div>
		</div>

	</div>
</template>
<script>
import {KeywordModel} from '../models/keyword.js'
let keywordModel=new KeywordModel()
export default{
	name:'search_page',
	data(){
		return{
			historyWords:[],
			q:'',
			hotWords:['贝德玛','雅诗兰黛','天气丹','雪花秀','爱他美']
		}
	},
	props:{

	},
	created(){
		this.historyWords=keywordModel.getHistory()
	},
	methods:{
		goback(){
			history.go(-1)
		},
		limit(array,length){
  		return array.slice(0,length)
  	},
  	onConfirm(e){
			let q=e.target.innerText || this.$refs.searchInput.value
			if(q){
				this.q=q
				keywordModel.addToHistory(q)
				this.historyWords=keywordModel.getHistory()
				this.$router.push('/goodsDetail')
			}else{
				this.$message({
          message: '请输入搜索关键词',
          type: 'warning'
        });
			}
		}
	},
	directives: {//自定义指令focus 解决Input focus问题
		focus:{
			inserted: function (el) {
				el.focus()
			}
		}
	}
}
</script>
<style lang="stylus" scoped>
.head{width:100%;height:50px;display:flex;flex-direction:row;justify-content:space-between;align-items:center;}
.head .icon-back{width:50px;height:50px;line-height:50px;text-align:center;font-size:24px;}
.head .Sinput{flex:1;background:#f8f8f8;border-radius:5px;height:32px;line-height:32px;font-size:12px;text-indent:1em;color:#666;}
.head .searchBtn{width:50px;height:50px;line-height:50px;color:#801da1;font-size:14px;text-align:center;}

.searchList{width:100%;padding:0 10px;box-sizing:border-box;}
.history{width:100%;margin:20px 0 10px 0;display: flex;font-size:14px;flex-direction: column;}
.title{line-height:15px;display: flex;flex-direction: row;align-items: center;}
.title .chunk{height:15px;width:5px;background-color: #000;display: inline-block;margin-right:10px;}
.title .text{}
.tags{display: flex;flex-direction: row;flex-wrap: wrap;margin-top:12px;padding-left:15px;}
.tagsItem{display:inline-block;padding:2px 6px;background-color: #f5f5f5;color: #666666;border-radius: 2px;display: inline-flex;flex-direction: row;align-items: center;justify-content: center;font-size: 14px;margin-right:8px;margin-bottom: 5px;}



.hotSearch{width:100%;margin:20px 0 10px 0;display: flex;font-size:14px;flex-direction: column;}



</style>